<template>
  <div class="wrap">
    <div class="search">
      <a-input placeholder="输入关键词搜索你想寻求帮助的问题" v-model="search">
        <a-icon slot="prefix" type="search" />
        <div slot="addonAfter" @click="getList">搜索</div>
      </a-input>
    </div>
    <div class="tit">问题类别</div>
    <a-list :grid="{ gutter: 1, column: 6 }" :dataSource="list">
      <a-list-item slot="renderItem" slot-scope="item">
        <div class="litem cp" @click="wTag(item.cate_id,item.title)">{{item.title}}</div>
      </a-list-item>
    </a-list>
    <div class="tit">热门问题</div>
    <a-list :grid="{ gutter: 1, column: 2 }" :dataSource="hot">
      <a-list-item slot="renderItem" slot-scope="item">
        <li
          class="lis cp"
          style="list-style:disc;"
          @click="wTag(item.help_id,item.title)"
        >{{item.title}}</li>
      </a-list-item>
    </a-list>
  </div>
</template>

<script>
import { HELP_LIST } from "../server";

export default {
  layout: "main",
  data() {
    return {
      search: "",
      list: [],
      hot: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    wTag(id, title) {
      this.$router.push({
        path: "/consult/help/list",
        query: { id, title, type: "cate" }
      });
    },
    getList() {
      HELP_LIST({ type: "help", search: this.search }).then(res => {
        if (!res) return;
        this.list = res.data.list;
        this.hot = res.data.hot;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.wrap {
  border: 3px solid #0084ff;
  border-radius: 6px;
  padding: 10px;
}
.search {
  height: 66px;
  padding: 15px 10px;
  background: #eeeeee;
  &/deep/.ant-input-affix-wrapper {
    height: 36px;
  }
  &/deep/.ant-input-group-addon {
    width: 136px;
    height: 36px;
    background: #0084ff;
    color: #fff;
  }
}
.tit {
  font-size: 18px;
  font-weight: bold;
  margin: 20px 0;
}
.litem {
  width: 144px;
  height: 48px;
  line-height: 48px;
  text-align: center;
  border-radius: 5px;
  border: 1px solid #0084ff;
  color: #0084ff;
  &:hover {
    background: #0084ff;
    color: #fff;
  }
}
.lis:hover {
  color: #0084ff;
}
</style>